<!-- 分页结果 -->
<!--分页-->
<template>
  <div class="margin-top-20 page-result">
    <!--<el-card class="margin-top-20" v-for="i in 7" :key="i">-->
<!---->
    <el-card class="margin-top-20">          
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
        
          <div style="display: flex; justify-content: flex-start">
            
            <div class="up-info__avatar">
 

              <a href="./CoreList.vue#c1" target="_blank" class="anchor">
                <img
                  src="http://pics0.baidu.com/feed/574e9258d109b3de7694cc410288bd87800a4caa.jpeg"
                  
                  width="185px"
                  height="90px"
                  style="margin-leif:150px;"
                />
              </a>
              <div class="time">01:13</div>
            </div>
          
            <div  class="up-info__info">
              <div>
                <span class="font-bolder">小鬼演唱会疑似被鬼屋附身</span>
              </div>
              <div><span>简介</span><span>微博 太哈人了</span></div>
              <div class="info-list-name">
                西姆斯饼饼 | 2021-06-01 11:30:26 发布
              </div>
              

            </div>
        </div>


      </div>     
      </div>             
    </el-card>


<el-card class="margin-top-20">
  <!--一级分类-->
        
      <div style="display: flex; justify-content: flex-end width:60px;height:70px"><!--留-->
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        ><!--留-->
        <table class="total-table">
          <tr>
            <td style="width:100px;borderColor:red;borderRadius:5">核心一览</td>
            
            <td style="width:100px;borderRadius:5">爆款分析</td>
          
            <td style="width:100px;borderRadius:5">评论分析</td>
        
            <td style="width:100px;borderRadius:5">弹幕分析</td>
            
            <td style="width:100px;borderRadius:5">观众画像</td>
                      

          </tr>
        </table>    
        </div>
    

      </div>
       

    <div class="line-1px" />
      <div style="display: flex; justify-content: space-around">
        
        <table>
          <tr style="width:0px;">
            <td style="width:1200px;">弹幕热词TOP10</td>                       
          </tr>
        </table>
        
      </div>
 <!--条形图-->     
    <div class="line-1px" />
      <div style="display: flex; justify-content: space-around">

        <div id="main" style="width: 4000px;height:300px;"></div>

      </div>
<!--end-->

<!--视频标签-->

    

<!--end-->    
      </el-card>




<!--e分页5-->

<el-card class="margin-top-20">
         
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          ">

       <table class="total-table">
          <tr>
            <td style="width:500px;">弹幕列表</td>            
          </tr>


        </table>  

        </div>

      </div>
    </el-card>

<el-card class="margin-top-20">
         
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          ">

       <table class="total-table">

          <tr>
            <td style="width:120px;">视频时间</td>
            <td style="width:850px;">弹幕内容</td>
            <td>发表时间</td>  
          </tr>

          <tr>
            <td style="width:120px;">00:11</td>
            <td style="width:200px;">50分钟</td>
            <td>2021-6-14 12:55:49</td>
          </tr>

          <tr>
            <td style="width:120px;">06:35</td>
            <td style="width:200px;">50分钟</td>
            <td>2021-6-14 12:55:49</td>
          </tr>
          <tr>
            <td style="width:120px;">02:04</td>
            <td style="width:200px;">猝不及防</td>
            <td>2021-6-14 12:55:49</td>
          </tr>
          <tr>
            <td style="width:120px;">06:21</td>
            <td style="width:200px;">AOTE攻击</td>
            <td>2021-6-14 12:55:49</td>
          </tr>
          <tr>
            <td style="width:120px;">01:36</td>
            <td style="width:200px;">笑死</td>
            <td>2021-6-14 12:55:49</td>
          </tr>
          <tr>
            <td style="width:120px;">00:18</td>
            <td style="width:200px;">猝不及防</td>
            <td>2021-6-14 12:55:49</td>
          </tr>
          <tr>
            <td style="width:120px;">00:06</td>
            <td style="width:200px;">49分钟</td>
            <td>2021-6-14 12:55:49</td>
          </tr>
          <tr>
            <td style="width:120px;">04:20</td>
            <td style="width:200px;">阿西吧无聊</td>
            <td>2021-6-14 12:55:49</td>
          </tr>
          <tr>
            <td style="width:120px;">00:10</td>
            <td style="width:200px;">撸树</td>
            <td>2021-6-14 12:55:49</td>
          </tr>
          <tr>
            <td style="width:120px;">02:19</td>
            <td style="width:200px;">45分钟</td>
            <td>2021-6-14 12:55:49</td>
          </tr>
          <tr>
            <td style="width:120px;">02:19</td>
            <td>45分钟</td>
            <td>2021-6-14 12:55:49</td>
          </tr>



        </table>  

        </div>

      </div>
    </el-card>

    



<!---->


  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "",
  data: function () {
    return {
 
    };
  },

  components: {},

  computed: {},

  mounted: function () {
    this.line()
  },

  methods: {
    //第一个图
    line(){
       var chartDom = document.getElementById('main');
       var myChart = echarts.init(chartDom);
       var option;

option = {
    dataset: [{
        dimensions: ['name', 'date'],
        source: [
            [' 热乎', 89, ],
            ['猝不及防 ', 55, ],
            [' 高斯 ',  46, ],
            ['出息',  44, ],
            [' 小潮 ', 33, ],
            [' 爷青回',  33, ],
            ['院长', 30 ,],
            [' 樟脑丸',28,  ],
            ['小狗 ', 21 ,],
            ['凉了 ', 19 ,],
        ]
    }, {
        transform: {
            type: 'sort',
            config: { dimension: 'date', order: 'desc' }
        }
    }],
    xAxis: {
        type: 'category',
        axisLabel: { interval: 0, rotate: 30 },
    },
    yAxis: {},
    series: {
        type: 'bar',
        encode: { x: 'name', y: 'date' },
        datasetIndex: 1
    }
};

option && myChart.setOption(option);




//到此结束
  
    
    }
  
  },
};
</script>
<style lang="scss" scoped>
.page-result {
  height: 1000px;

  .column-1px {
    border-left: 1px solid #f6f7fb;
    margin: 0 20px;
    height: 120px;
  }
  .up-info__avatar {
    width: 184px;
    height: 115px;
    position: relative;

    margin-right: 16px;
    border-radius: 2px;
    text-align: center;

    .time {
      color: #999;
      margin-top: 10px;
      display: block;
      width: 39px;
      height: 17px;
      background: #000;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 2px 0 2px 0;
      color: #fff;
      font-size: 12px;
      text-align: center;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .up-info__info {
    height: 120px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-left: 10px;
    .info-list-name {
    }
    .tagList {
      text-align: left;
      display: flex;
      flex-wrap: wrap;
      margin-right: -4px;
      .tag {
        color: #909399;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-right: 4px;
        margin-bottom: 4px;
        text-align: center;
        padding: 1px 3px;
      }
    }
  }
}
</style>
